<template>
    <div class="disk-read-speed-test">
        <div class="Breadcrumb">
            <Breadcrumb :breadList='position'></Breadcrumb>
        </div>
        <div class="disk-read-page">
            <div class="disk-read-left">
                <div class="left-cotent">
                    <div class="left-cotent-first">
                        <div class="cotent-first-flex first">
                            <div class="divice-id"><span>Device ID:</span></div>
                        </div>
                        <div class="cotent-first-flex second">
                            <el-select v-model="value" filterable placeholder="请选择设备id">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="cotent-first-flex third">
                            <button class="button">Register</button>
                            <button class="button">start</button>
                            <button class="button">Stop</button>
                        </div>

                    </div>
                    <div class="left-cotent-seconde">
                        <div class="test-config"><span>Test Config</span></div>
                        <div>
                            Path:
                            <el-input size="mini" v-model="input" placeholder="请输入内容"></el-input>
                        </div>

                    </div>
                    <div class="left-cotent-third">third</div>
                </div>
            </div>
            <div class="disk-read-right">
                <div class="right-cotent">
                    <div>right</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb';
export default {
    name:"DRST",
    data(){
        return {
            position: ["Main", "Linux", "Storage", "Disk Read Speed Test"],
            options:[
                {
                    value: 'divices id 1',
                    label: 'divices id 1'
                },
                {
                value: 'divices id 2',
                label: 'divices id 2'
                }
            ],
            value: '',
            input: ''
        }
    },
    components:{
        Breadcrumb
    },
    methods:{
    },
}
</script>

<style scoped>
.disk-read-speed-test{
    height: 100%;
    width: 100%;
}
.disk-read-speed-test .Breadcrumb{
    height: 5%;
    width: 100%;
    border-bottom: 0.5px;
    box-sizing: border-box;
    border-bottom:solid;
    border-color: #8D8D8D;
}

.disk-read-speed-test .disk-read-page{
    height: 95%;
    width: 100%;   
}
.disk-read-speed-test .disk-read-left{
    height: 100%;
    width: 60%;
    float: left;
}
.disk-read-speed-test .disk-read-left .left-cotent{
    padding: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first{
    height: 8%;
    width: 100%;
}

.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .cotent-first-flex{
    float: left;
    height: 100%;
    position: relative;
    padding-right: 10px;
}
.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .first{
    width: 16%;
    box-sizing: border-box;
}
.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .second{
    width: 30%;
    box-sizing: border-box;
}
.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .third{
    width: 54%;
    box-sizing: border-box;
    position: relative;
    top: 10%;
    display: flex;
    justify-content: space-around;
}

.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .third .button{
    height: 30px;
    width: 70px
}
.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-first .cotent-first-flex .divice-id{
    height: 100%;
    position: relative;
    top: 20%;;
}

.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-seconde{
    height: 17%;
    width: 100%;
    border-style: solid;
    box-sizing: border-box;
    border-color: #8D8D8D;
    border-width: 0.5px;
    position: relative;
}

.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-seconde .test-config{
    text-align: left;
    box-sizing: border-box;
    padding: 15px;
}
.disk-read-speed-test .disk-read-left .left-cotent .left-cotent-third{
    height: 75%;
    width: 100%;
}


.disk-read-speed-test .disk-read-right{
    height: 100%;
    width: 40%;
    float: left;
}
.disk-read-speed-test .disk-read-right .right-cotent{
    padding: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
</style>

